<template>
  <div class="home">
    <toptop />
    <div class="box">
      昵称：<input
        type="text"
        v-model="value1"
        placeholder="请输入用户名"
        v-on:input="hh"
      /><br />
      手机：<input
        type="text"
        v-model="value2"
        placeholder="请输入手机号"
        v-on:input="hh"
      /><br />
      密码：<input
        type="text"
        v-model="value3"
        placeholder="请输入密码"
        v-on:input="hh"
      /><br />
      <button v-show="show" @click="go">登录</button>
      <button v-show="!show">不可登录</button>
    </div>
  </div>
</template>

<script>
import toptop from "../components/toptop";
export default {
  components: {
    toptop,
  },
  data() {
    return {
      show: false,
      value1: "",
      value2: "",
      value3: "",
    };
  },
  mounted() {},
  methods: {
    hh() {
      console.log(123);
      if (this.value1 != "" && this.value2 != "" && this.value3 != "") {
        this.show = true;
      }
    },
    go() {
      // console.log(this.value2.length);
      if (this.value1 != "") {
        if (this.value2.length >= 6) {
          // console.log(123);
          const reg = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
          if (!reg.test(this.value2)) {
            return alert("手机号错误");
          }
        } else {
          return alert("手机号长度不够");
        }

        if (this.value3.length >= 6) {
          console.log('ok')
         } else {
          return alert("密码长度不够");
        }
        if (this.value2.length >= 6 && this.value3 >= 6) {
          var content = [];
          content.push(this.value1);
          content.push(this.value2);
          content.push(this.value3);
          console.log(content);
          this.$store.commit("ON_change", content);
          this.$router.push("/About");
        }
      } else {
        alert("用户名不能为空");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
div {
  width: 100%;
  height: 10rem;
  margin: 0 auto;
  text-align: center;
}
</style>
